<section id="widget-grid" class="">
	<!-- row -->
	<div class="row">
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget jarviswidget-color-blueLight" id="wid-id-0" data-widget-sortable="true" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-table"></i> </span>
					<h2> 班线管理 </h2>
				</header>
				<!-- widget div-->
				<div>
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
					</div>
					<!-- end widget edit box -->

					<!-- widget content -->
					<div class="widget-body no-padding">
						<!-- 自定义搜索区 -->
						<div class="widget-body-toolbar" style="height:70px;overflow:hidden;">
							<form role="form" class="smart-form">
								<div class="global-search-box">
									<section class="pull-left no-padding pull-width200" >
										<label class="">班线名称</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
										</label>
									</section>
									<section class="pull-left no-padding pull-width180" >
										<label class="">所属机构</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
										</label>
									</section>
									<section class="pull-left no-padding pull-width120" >
										<label class="">出发站点</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
										</label>
									</section>
									<section class="pull-left no-padding pull-width120" >
										<label class="">到达站点</label>
										<label class="input">
											<input type="text" name="tid" placeholder="" class="input-sm">
										</label>
									</section>
									<section class="pull-left no-padding pull-width100" >
										<label class="lael">绑定行驶线路</label>
										<label class="select">
											<select class="input-sm">
												<option value="0">全部</option>
												<option value="1">绑定</option>
												<option value="2">未绑定</option>
											</select> <i></i> 
										</label>
									</section>
									<div class="global-search-btn" >
										<a class="btn btn-primary  btn-sm" type="button"><i class="fa fa-search"></i> 查询</a>
							  		</div>
								</div>
								
							</form>
						</div>
						<!-- 自定义搜索区结束 -->
						<div class="row margin-top-10 margin-bottom-10" style="margin:0">
							<div class="col-xs-8 col-sm-8">
								<div class="btn-group">
									<a href="#ane/demo_classline.html" class="btn btn-default">新增班线</a>
									<a href="#" target="_blank" class="btn btn-default">导入班线</a>
								</div>
								<div class="btn-group">
									<a href="#" class="btn btn-default">导出</a>
									<a href="#" class="btn btn-default">删除</a>
								</div>
							</div>
						</div>
						<table id="dt_basic" class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th >
										<label class="no-margin"><input type="checkbox" class="checkbox style-0 checkAll"><span></span></label>
									</th>
									<th>操作</th>
									<th>班线名称</th>
									<th>所属机构</th>
									<th>班线编码</th>
									<th>出发站点</th>
									<th>到达站点</th>
									<th>途经站点</th>
									<th>运行总时间(分钟)</th>
									<th>计划总里程(公里)</th>
									<th>修改时间</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>
										<label class="no-margin">
											<input type="checkbox" class="checkbox style-0">
											<span> </span>
										</label>
									</td>
									<td>
                                        <div class="btn-group">
                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                             	<i class="fa fa-pencil"></i>
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:void(0);">编辑</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="javascript:void(0);">删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>北京-郑州-广州</td>
									<td>安能物流</td>
									<td>bj-zz-gz</td>
									<td>北京分拨中心</td>
									<td>广州分拨中心</td>
									<td>郑州分拨中心</td>
									<td>1800</td>
									<td>2294</td>
									<td>2014-05-13 15:30</td>
								</tr>
								<tr>
									<td>
										<label class="no-margin">
											<input type="checkbox" class="checkbox style-0">
											<span> </span>
										</label>
									</td>
									<td>
                                        <div class="btn-group">
                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                             	<i class="fa fa-pencil"></i>
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:void(0);">编辑</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="javascript:void(0);">删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>北京-杭州</td>
									<td>安能物流</td>
									<td>bj-hz</td>
									<td>北京分拨中心</td>
									<td>杭州分拨中心</td>
									<td></td>
									<td>1450</td>
									<td>1591</td>
									<td>2014-05-13 15:30</td>
								</tr>
								<tr>
									<td>
										<label class="no-margin">
											<input type="checkbox" class="checkbox style-0">
											<span> </span>
										</label>
									</td>
									<td>
                                        <div class="btn-group">
                                            <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                                             	<i class="fa fa-pencil"></i>
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a href="javascript:void(0);">编辑</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="javascript:void(0);">删除</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                    <td>北京-无锡-苏州</td>
									<td>安能物流</td>
									<td>bj-wx-sz</td>
									<td>北京分拨中心</td>
									<td>苏州分拨中心</td>
									<td>无锡分拨中心</td>
									<td>1800</td>
									<td>2124</td>
									<td>2014-05-13 15:30</td>
								</tr>
								
								
							</tbody>
						</table>
					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget div -->
			</div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->
	</div>
	<!-- end row -->
</section>

<!-- Modal导出 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">导出车辆数据</h4>
			</div>
			<div class="modal-body">
				<form class="smart-form" action="">
					<fieldset class="no-padding">
						<div class="col-xs-12 no-padding">
							<div class="row margin-top-5">
								<div class="col col-10">
									<label class="label">数据包1（1-10000）</label>
									<label class="select">
										<div class="progress progress-xs progress-striped active">
											<div class="progress-bar bg-color-blue" role="progressbar" style="width: 100%"></div>
										</div>
									</label>
								</div>
								<div class="col col-2">
									<button type="button" class="btn btn-sm btn-success btn-block margin-top-10">下载</button>
								</div>
							</div>
							<hr />
							<div class="row margin-top-5">
								<div class="col col-10">
									<label class="label">数据包2（10001-20000）</label>
									<label class="select">
										<div class="progress progress-xs progress-striped active">
											<div class="progress-bar bg-color-blue" role="progressbar" style="width: 45%"></div>
										</div>
									</label>
								</div>
								<div class="col col-2">
									<button type="button" class="btn btn-sm btn-success margin-top-10 btn-block disabled">下载</button>
								</div>
							</div>
						</div>
					</fieldset>
				</form>

			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary">
					打包下载
				</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">
					取消
				</button>
			</div>
		</div>
	</div>
</div><!-- /.modal -->


<!-- end widget grid -->
<!-- MAIN APP JS FILE -->


<script src="js/plugin/date/moment.js"></script>
<script src="js/plugin/date/daterangepicker.js"></script>

<script type="text/javascript">

	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();

	$(function(){
		$("#e5").select2({  //自动完成
		    placeholder: "aaaaa",
			allowClear: true,
		    minimumInputLength: 1,
		    data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
		});
	})



	// PAGE RELATED SCRIPTS

	loadDataTableScripts();
	function loadDataTableScripts() {

		loadScript("js/plugin/datatables/jquery.dataTables-cust.min.js", dt_2);

		function dt_2() {
			loadScript("js/plugin/datatables/ColReorder.min.js", dt_3);
		}

		function dt_3() {
			loadScript("js/plugin/datatables/FixedColumns.min.js", dt_4);
		}

		function dt_4() {
			loadScript("js/plugin/datatables/ColVis.min.js", dt_5);
		}

		function dt_5() {
			loadScript("js/plugin/datatables/ZeroClipboard.js", dt_6);
		}

		function dt_6() {
			loadScript("js/plugin/datatables/media/js/TableTools.min.js", dt_7);
		}

		function dt_7() {
			loadScript("js/plugin/datatables/DT_bootstrap.js", runDataTables);
		}

	}

	function runDataTables() {

		/*
		 * BASIC
		 */
		$('#dt_basic').dataTable({
			//"sDom" : "<'dt-top-row'><'dt-wrapper't><'dt-row dt-bottom-row'<'row'<'col-sm-4'i><'col-sm-8 text-right'p>>",
			//"sDom" : '<"dt-row dt-bottom-row"flipt>',
			"sPaginationType" : "bootstrap_full",
			"bFilter": false,
			"bAutoWidth": false,
			"aaSorting": [[ 10, "desc" ]],	//默认排序列
			"aoColumns": [
				{ "bSortable": false ,"sWidth":"30px"},
				{ "bSortable": false ,"sWidth":"40px"},
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null,
				null
			], 
			//"sScrollX": "110%",
        	//"bScrollCollapse": true,
			//"bPaginate": false, //取消翻页显示
			//"bInfo": false,//页脚信息
			//"bScrollAutoCss": true,
			// "sScrollY": "300px",
			// "bScrollInfinite": true,
			//"bScrollCollapse": true,
			// "iScrollLoadGap": 30,
			//"bPaginate": false,
			//"bRetrieve": true,
			// "iDisplayLength": 5, //每页显示数据量
			//"bLengthChange": false, // 用户不可改变每页显示数量
			"bProcessing": true, // 是否启用进度显示，进度条等等，对处理大量数据很有用处。// 默认值：false
			//"bStateSave": true, // 保存状态到cookie
			"oLanguage": {
			"sZeroRecords": "抱歉， 没有找到",
			"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
			"sInfoEmpty": "没有数据",
			"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
			"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "前一页",
			"sNext": "后一页",
			"sLast": "尾页"
			},
			"sZeroRecords": "没有检索到数据",
			"sProcessing": "<img src='./loading.gif' />"
			},
 			"fnDrawCallback": function( oSettings ) {
     			$(oSettings.nTable).css('width','100%');
     			$(oSettings.nTable).find("th,td").css('white-space', 'nowrap');
     			 $(oSettings.nTable).find("tr:last td").css({ "border": '1px solid #DDDDDD'});                 
     			$(oSettings.nTable).find('tbody tr.even').css('backgroundColor', '#FFF');
     			$(oSettings.nTable).find(".btn-group").slice(-5).addClass('dropup');
                $(oSettings.nTable).find(".btn-group").slice(0,3).removeClass('dropup');
                $(oSettings.nTable).parent(".dt-wrapper").css({
                    'overflow': 'auto',
                    'min-height': '300px',
                    'background': '#f9f9f9'
                });
                //$(oSettings.nTable).find("th label input,td label input").next("span").css('margin-right', '0');
                // L = $(oSettings.nTable).find("tr").length;
                // if(L < 6){
                //     $(oSettings.nTable).find("tr:last td").css({
                //         "border": '1px solid #DDDDDD'
                //     });                 
                // };
                var chk = $(oSettings.nTable).find(".checkAll");
                chk.click(function(event) {
                    if ($(this).prop('checked')) {
                        $(this).parents("table").find('tbody td input.checkbox').prop('checked', true)
                        $(this).siblings("span").removeClass('someone');
                    } else {
                        $(this).parents("table").find('tbody td input.checkbox').prop('checked', false)
                    };
                });
                $(oSettings.nTable).find("td input.checkbox").click(function(event) {
                    if (!$(this).prop('checked')) {
                        chk.siblings("span").addClass('someone');
                    };
                    checkStateAll = true;
                    checkStateOne = false;
                    $("tbody td input.checkbox").each(function(index, el) {
                        checkStateAll = checkStateAll && $(this).prop('checked');
                        checkStateOne = checkStateOne || $(this).prop('checked');
                    });
                    if (checkStateAll) {
                        checkStateOne = false;                      
                        chk.prop('checked', true)
                        chk.siblings("span").removeClass('someone');                     
                    }
                    if (checkStateOne) {
                        chk.prop('checked', true)
                        chk.siblings("span").addClass('someone');
                    }                   
                    if (checkStateAll === checkStateOne) {
                        chk.prop('checked', false)
                        chk.siblings("span").removeClass('someone');                         
                    }
                });
 			},
 			"columnDefs": [ 
				{
					// The `data` parameter refers to the data for the cell (defined by the
					// `data` option, which defaults to the column being worked with, in
					// this case `data: 0`.
					"render": function ( data, type, row ) {
						return data +' ('+ row[3]+')';
					},
					"targets": 0
				},
				{ "visible": false,  "targets": [ 3 ] }
			]


		});

		/* END BASIC */

	}

	function dateExport(){
		$('#myModal').modal();
	}

	function viewDiv(){
		$('#viewLbs').modal();
		$("#viewLbs .modal-dialog").css("width","800px");
		
	}
	


</script>
